<template>
    <!--detailNav组件 顶部导航栏-->
    <detailNav v-show="!isShowHomeNav"></detailNav>
    <!--头部背景图片组件-->
    <homeHeaderBanner>
        <!--导航栏  总组件-->
        <homeNav></homeNav>
    </homeHeaderBanner>
    <!--/**导航栏以下 轮播图以上 的部分*/-->
    <homeChannel></homeChannel>
    <!--轮播图 及其右边推荐视频 部分-->
    <homeRecommend></homeRecommend>

</template>

<script>
import homeNav from './homeComponent/homeNav';
import homeHeaderBanner from './homeComponent/homeHeaderBanner.vue'
import homeChannel from './homeComponent/homeChannel.vue';
import homeRecommend from './homeComponent/homeRecommend.vue';
import detailNav from './detailComponent/detailNav.vue';
// 使用Lodash实现深拷贝（通过lodash.throttle来实现节流）
import lodash from 'lodash';//导入loadsh插件

export default {
    /**首页组件*/
    name: 'homeView',
    components: {
        homeNav,
        homeHeaderBanner,
        homeChannel,
        homeRecommend,
        detailNav
    },
    data() {
        return {
            isShowHomeNav: true,
            lastFlag: true
        }
    },
    methods: {
        navChange() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 35) {
                this.isShowHomeNav = false
            } else {
                this.isShowHomeNav = true
            }
            if (this.isShowHomeNav != this.lastFlag) {
                this.$emit('navChange', this.isShowHomeNav)
            }
            this.lastFlag = this.isShowHomeNav
        }
    },
    created() {
        // 通过lodash.throttle来实现节流
        this.throttled_navChange = lodash.throttle(this.navChange, 500)
        window.addEventListener('scroll', this.throttled_navChange);
    }
}
</script>

<style scoped>

</style>
